import React from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment'
import { DateRange } from 'react-date-range';
import './DateRange.less';

// moment.locale("zh-cn");

class MyDateRange extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'DateRange';
    this.state = {
      show:false,
      begin:"年-月-日",
      end:"年-月-日"
    }
  }
  //选择时间
  handleSelect(date){
    var dataValue={
      begin:moment(date.startDate).format('l'),
      end:moment(date.endDate).format('l')
    }
    if(this.props.onChange){
      this.props.onChange(dataValue)
    }
  }
  //清空时间
  clear(e){
    this.setState({
        begin:"年-月-日",
        end:"年-月-日"
    })
    if (e && e.stopPropagation){
      e.stopPropagation()
    }else{
      window.event.cancelBubble=true
    }
    var dataValue={
      begin:"",
      end:""
    }
    this.props.onChange(dataValue)
  }
  // blur操作
  toggleUp(){
    this.setState({
      show:false
    })
  }
  // focus操作
  toggleDown(){
    this.setState({
      show:true
    })
  }
  toggle(){
    this.setState({
      show:!this.state.show
    })
  }
  // 强制button的focus
  handleMouseDown(e){
    e.preventDefault()// blur会在mousedown之后触发，阻止它即可
    ReactDOM.findDOMNode(this.refs.dateButton).focus()
  }
  render() {
    var { value } = this.props
    return <div className="tederen-DateRange">
      <button className="text-container" ref="dateButton"
        onClick={this.toggle.bind(this)} onBlur={this.toggleUp.bind(this)}>
        <span>
          <span>{value.begin==""?"年-月-日":value.begin}</span>
          <span className="line">~</span>
          <span>{value.end==""?"年-月-日":value.end}</span>
        </span>
        {/*<span className="ion-close-circled" onClick={this.clear.bind(this)}></span>*/}
        {/*<span className="ion-android-arrow-dropdown" style={this.state.show?{transform: "rotateX(180deg)"}:{}}></span>*/}
      </button>
      {this.state.show?<div className="date-container" onMouseDown={this.handleMouseDown.bind(this)}>
        <DateRange
        // onInit={this.handleSelect}
        onChange={this.handleSelect.bind(this)}
        theme={{
          DateRange      : {
            background   : '#ffffff',
            boxShadow    : '0 2px 4px rgba(0, 0, 0, 0.4)'
          },
          Calendar       : {
            background   : 'transparent',
            color        : '#95a5a6',
          },
          MonthAndYear   : {
            background   : '#fff',
            color        : '#444'
          },
          MonthButton    : {
            background   : '#0F7A94'
          },
          MonthArrowPrev : {
            borderRightColor : '#fff',
          },
          MonthArrowNext : {
            borderLeftColor : '#fff',
          },
          Weekday        : {
            background   : '#fff',
            color        : '#0F7A94'
          },
          Day            : {
            transition   : 'transform .1s ease, box-shadow .1s ease, background .1s ease'
          },
          DaySelected    : {
            background   : '#0F7A94'
          },
          DayActive      : {
            background   : '#0F7A94',
            boxShadow    : 'none'
          },
          DayInRange     : {
            background   : '#348CA1',
            color        : '#fff'
          },
          DayHover       : {
            background   : '#0F7A94',
            color        : '#fff',
            // transform    : 'scale(1.1) translateY(-10%)',
            // boxShadow    : '0 2px 4px rgba(0, 0, 0, 0.4)'
          }
        }}
      /></div>:null}
    </div>
  }
}

export default MyDateRange
